<template>
    <div class="banner">
        <el-carousel :interval="4000" type="card" height="14rem">
            <el-carousel-item v-for="item in images" :key="item">
                <img :src="item.pic" @click="handleBanner(item)">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup lang="ts">

import { onMounted, ref } from 'vue'
import swiper from '../../api/findMusic/swiper/swiper'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()




// 获取轮播图图片数据
let images = ref();
onMounted(async () => {
    let res: any = await swiper();
    images.value = res.banners;
})




// 点击轮播图触发事件
function handleBanner(item: any) {
    console.log(item.targetType);
    // 歌单
    if (item.targetType == 1000) {
        router.push({
            name: 'playlistDetails',
            params: {
                id: item.targetId
            }
        })
    }
    // 专辑
    else if (item.targetType == 10) {
        router.push({
            name: 'albumDetails',
            params: { id: item.targetId }
        })
    }
    // 新歌首发/电台
    else {
        ElMessage.info('特殊Banner,暂时无法处理')
    }
}


</script>

<style lang="less" scoped>
.banner {
    width: 100%;

    .el-carousel__item {
        border-radius: 15px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>